<template>
  <div class="d-flex flex-wrap justify-content-around h-100 overflow-y-auto"
       ref="dragTargetRef">
    <a-card v-for="item in dashboardList"
            :key="item.title"
            hoverable
            class="dashboard-item mt-2">
      <img :alt="item.alt"
           :src="item.src"
           class="drag-pos cusor-move"
           slot="cover" />
      <a-card-meta :title="item.title"
                   :description="item.description" />
    </a-card>
    <a-spin :spinning="isLoading" />
  </div>
</template>

<script>

/**
 * @description Dashboard Component
 */

import Sortable from 'sortablejs'
import Api from '@api'

export default {
  data() {
    return {
      isLoading: false,
      dashboardList: []
    }
  },
  methods: {
    // Init
    init() {
      this.getDashboardList()
      this.$nextTick(() => {
        this.handleDrag()
      })
    },
    getDashboardList() {
      // Get data
      this.isLoading = true
      Api.get('dashboard', {}, true).then(
        res => {
          if (res) {
            this.isLoading = false
            this.dashboardList = res
          }
        },
        () => {
          this.isLoading = false
        }
      )
    },
    handleDrag() {
      // Config sortable
      Sortable.create(this.$refs.dragTargetRef, {
        handle: '.drag-pos',
        animation: 150,
        ghostClass: 'cusor-grabbing', // Class name for the drop placeholder
        chosenClass: 'cusor-grab', // Class name for the chosen item
        dragClass: 'cusor-grabbing', // Class name for the dragging item
        setData: function (dataTransfer) {
          dataTransfer.setData('vi-drag-dashboard', '')
        },
        onEnd: function () {
          // TODO: Memory storage function
        }
      })
    }
  },
  created() {
    this.init()
  },
  components: {
  }
}
</script>
